<template>
<!--
 * @FileDescription: 封面 and 数量统计
 * @author Sun Yan
 * @Date $ 
-->
<el-row class="academy-body-counts-container">
    <el-col :span="12" :xs="24" :sm="24" :md="12"  class="academy-body-counts-cover">
      <img src="@/assets/images/zhutu.png" alt="">
    </el-col>
    <el-col  :span="12" :xs="24" :sm="24" :md="12"  class="academy-body-counts-right">
      <div v-for="(item, index) in counts" :key="index" class="academy-body-counts-right-item">
        <p>{{ item.title }}</p>
        <p>
          <span>{{ conntTextInfo[item.key] }}</span>
        </p>
      </div>
    </el-col>
</el-row>
</template>
<script>
 /**
  * @description: 方法描述
  * @param {参数类型} 参数名称
  * @param {参数类型} 参数名称
  * @return void
  */
export default {
    name: "academy-counts",
    data(){
        return {
          conntTextInfo: {
            dayCount: 1543,
          },

          counts: [
            {
              title: '昨日晚归人数',
              key: 'dayCount'
            },
            {
              title: '日总进入次数',
              key: 'dayCount'
            },
            {
              title: '人员未离开24小时',
              key: 'dayCount'
            },
            {
              title: '月总进入次数',
              key: 'dayCount'
            },
            {
              title: '昨日未归人数',
              key: 'dayCount'
            },
            {
              title: '3日未离开',
              key: 'dayCount'
            },
          ]
        }
    },
    created() {
    
    },
    
    methods: {
    
    }
}
</script>

<style lang="scss">
.academy-body-counts {
  &-container {
    @include wh;
    //background: #FFF;
  }

  &-cover {
    img {
      max-width: 460px;
      @include wh(100%, 100%);
      display: block;
      margin: 0 auto;
      object-fit: cover;
    }
  }

  &-right {
    display: flex;
    flex: 0 0 1;
    flex-flow: wrap;
    margin: 20px auto 0;
    &-item {
      flex: 0 0 50%;
      text-align: center;

      p {
        margin: 11px auto 0;
        color: $com-color-success;
        font-size: var(--normal-font-size);
      }

      p + p span {
        color: $com-color-bright;
        font-weight: bold;
        font-size: var(--h1-font-size);
      }
    }
  }


}

</style>